<template>
	<view class="component-page">
		<view class="page-header">
			<view class="back-button" @click="backToHome">
				<text class="back-icon">←</text>
				<text>返回</text>
			</view>
			<text class="page-title">侧滑操作</text>
		</view>
		
		<view class="demo-section">
			<view class="section-title">
				基础侧滑操作
				<text class="hint">(向左滑动显示操作按钮)</text>
			</view>
			
			<view class="swipe-list">
				<view v-for="(item, index) in basicItems" :key="index">
					<xl-swipe-action 
						:buttons="defaultButtons"
						:auto-close="true"
						@action="(e) => onSwipeAction(e, index)"
					>
						<view class="swipe-item">
							<view class="item-content">
								<text class="item-title">{{ item.title }}</text>
								<text class="item-desc">{{ item.desc }}</text>
							</view>
							<view class="item-arrow">
								<text class="arrow-icon">›</text>
							</view>
						</view>
					</xl-swipe-action>
				</view>
			</view>
		</view>
		
		<view class="demo-section">
			<view class="section-title">
				自定义样式
			</view>
			
			<view class="swipe-list">
				<view v-for="(item, index) in customItems" :key="index">
					<xl-swipe-action 
						:buttons="customButtons"
						:auto-close="true"
						@action="(e) => onCustomSwipeAction(e, index)"
					>
						<view class="swipe-item custom-item" :class="item.class">
							<view class="item-icon">
								<text class="icon-text">{{ item.icon }}</text>
							</view>
							<view class="item-content">
								<text class="item-title">{{ item.title }}</text>
								<text class="item-desc">{{ item.desc }}</text>
							</view>
							<view class="item-right">
								<text class="item-badge" v-if="item.badge">{{ item.badge }}</text>
								<text class="arrow-icon">›</text>
							</view>
						</view>
					</xl-swipe-action>
				</view>
			</view>
		</view>
		
		<view class="demo-section">
			<view class="section-title">
				消息列表
			</view>
			
			<view class="swipe-list">
				<view v-for="(item, index) in messageItems" :key="index">
					<xl-swipe-action 
						:buttons="messageButtons"
						:auto-close="true"
						@action="(e) => onMessageSwipeAction(e, index)"
					>
						<view class="message-item" :class="{ 'unread': !item.read }">
							<view class="avatar">
								<image class="avatar-image" :src="item.avatar" mode="aspectFill" />
								<view class="avatar-badge" v-if="!item.read"></view>
							</view>
							<view class="message-content">
								<view class="message-header">
									<text class="message-name">{{ item.name }}</text>
									<text class="message-time">{{ item.time }}</text>
								</view>
								<text class="message-text">{{ item.message }}</text>
							</view>
						</view>
					</xl-swipe-action>
				</view>
			</view>
		</view>
		<view class="demo-section">
			<view class="section-title">功能特性</view>
			<view class="feature-list">
				<view class="feature-item">
					<view class="feature-icon">👆</view>
					<view class="feature-info">
						<text class="feature-title">左右滑动操作</text>
						<text class="feature-desc">支持单侧或两侧滑动显示按钮</text>
					</view>
				</view>
				<view class="feature-item">
					<view class="feature-icon">🎨</view>
					<view class="feature-info">
						<text class="feature-title">自定义样式配置</text>
						<text class="feature-desc">按钮颜色、大小、图标等可定制</text>
					</view>
				</view>
				<view class="feature-item">
					<view class="feature-icon">🔄</view>
					<view class="feature-info">
						<text class="feature-title">自动关闭功能</text>
						<text class="feature-desc">点击后自动关闭其他已打开项</text>
					</view>
				</view>
				<view class="feature-item">
					<view class="feature-icon">📱</view>
					<view class="feature-info">
						<text class="feature-title">跨平台适配</text>
						<text class="feature-desc">兼容各类小程序和App环境</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

// 默认按钮配置
const defaultButtons = [
	{
		text: '编辑',
		style: {
			backgroundColor: '#007aff',
			color: '#fff'
		}
	},
	{
		text: '删除',
		style: {
			backgroundColor: '#ff3b30',
			color: '#fff'
		}
	}
];

// 自定义按钮配置
const customButtons = [
	{
		text: '分享',
		style: {
			backgroundColor: '#34C759',
			color: '#fff',
			fontWeight: 'bold'
		}
	},
	{
		text: '收藏',
		style: {
			backgroundColor: '#FF9500',
			color: '#fff',
			fontWeight: 'bold'
		}
	}
];

// 消息按钮配置
const messageButtons = [
	{
		text: '标为已读',
		style: {
			backgroundColor: '#007aff',
			color: '#fff'
		}
	},
	{
		text: '删除',
		style: {
			backgroundColor: '#ff3b30',
			color: '#fff'
		}
	}
];

// 基础列表数据
const basicItems = ref([
	{
		title: '基础滑动操作',
		desc: '向左滑动展示操作按钮'
	},
	{
		title: '自动关闭功能',
		desc: '点击按钮后自动关闭'
	}
]);

// 自定义样式列表数据
const customItems = ref([
	{
		title: '绿色主题',
		desc: '自然生态风格',
		icon: '🌿',
		class: 'green-item'
	},
	{
		title: '橙色主题',
		desc: '活力四射风格',
		icon: '🔥',
		badge: '新',
		class: 'orange-item'
	}
]);

// 消息列表数据
const messageItems = ref([
	{
		name: '张三',
		message: '嗨，项目进展如何？可以在今天下午开个会讨论一下吗？',
		time: '10:30',
		avatar: '/static/demo/avatar1.jpg',
		read: false
	},
	{
		name: '李四',
		message: '已收到你发送的文件，我会尽快审核并给你反馈。',
		time: '昨天',
		avatar: '/static/demo/avatar2.jpg',
		read: false
	}
]);

// 返回首页
const backToHome = () => {
	uni.navigateBack();
};

// 处理基础滑动操作
const onSwipeAction = (e, index) => {
	const { button } = e;
	if (button.text === '删除') {
		uni.showModal({
			title: '确认删除',
			content: '确定要删除这项吗？',
			success: (res) => {
				if (res.confirm) {
					basicItems.value.splice(index, 1);
					uni.showToast({
						title: '删除成功',
						icon: 'success'
					});
				}
			}
		});
	} else if (button.text === '编辑') {
		uni.showToast({
			title: '点击了编辑按钮',
			icon: 'none'
		});
	}
};

// 处理自定义样式滑动操作
const onCustomSwipeAction = (e, index) => {
	const { button } = e;
	if (button.text === '分享') {
		uni.showToast({
			title: '分享功能开发中',
			icon: 'none'
		});
	} else if (button.text === '收藏') {
		uni.showToast({
			title: '已添加到收藏',
			icon: 'success'
		});
	}
};

// 处理消息列表滑动操作
const onMessageSwipeAction = (e, index) => {
	const { button } = e;
	if (button.text === '删除') {
		uni.showModal({
			title: '确认删除',
			content: '确定要删除这条消息吗？',
			success: (res) => {
				if (res.confirm) {
					messageItems.value.splice(index, 1);
					uni.showToast({
						title: '删除成功',
						icon: 'success'
					});
				}
			}
		});
	} else if (button.text === '标为已读') {
		messageItems.value[index].read = true;
		uni.showToast({
			title: '已标记为已读',
			icon: 'success'
		});
	}
};
</script>

<style lang="scss">
.component-page {
	padding: 30rpx;
	background-color: #f7f7f7;
	min-height: 100vh;
	box-sizing: border-box;
}

.page-header {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
	
	.back-button {
		display: flex;
		align-items: center;
		padding: 10rpx 0;
		margin-right: 20rpx;
		
		.back-icon {
			font-size: 36rpx;
			margin-right: 6rpx;
		}
	}
	
	.page-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
}

.demo-section {
	margin-bottom: 30rpx;
	
	.section-title {
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
}

.swipe-list {
	background-color: #fff;
	border-radius: 16rpx;
	overflow: hidden;
	margin-bottom: 20rpx;
}

.swipe-item {
	display: flex;
	align-items: center;
	padding: 30rpx;
	background-color: #fff;
	border-bottom: 1px solid #f5f5f5;
	
	&:last-child {
		border-bottom: none;
	}
	
	.item-content {
		flex: 1;
		margin-right: 20rpx;
		
		.item-title {
			font-size: 30rpx;
			color: #333;
			margin-bottom: 6rpx;
			display: block;
		}
		
		.item-desc {
			font-size: 26rpx;
			color: #999;
			display: block;
		}
	}
	
	.item-arrow {
		color: #ccc;
		font-size: 32rpx;
	}
}

.custom-item {
	.item-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 16rpx;
		background: linear-gradient(45deg, #007AFF, #5856D6);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
		
		.icon-text {
			color: #fff;
			font-size: 32rpx;
		}
	}
	
	.item-right {
		display: flex;
		align-items: center;
		
		.item-badge {
			background-color: #FF3B30;
			color: #fff;
			font-size: 24rpx;
			padding: 4rpx 12rpx;
			border-radius: 20rpx;
			margin-right: 10rpx;
		}
	}
	
	&.green-item {
		.item-icon {
			background: linear-gradient(45deg, #34C759, #30B850);
		}
	}
	
	&.orange-item {
		.item-icon {
			background: linear-gradient(45deg, #FF9500, #F88700);
		}
	}
}

.message-item {
	display: flex;
	align-items: center;
	padding: 20rpx 30rpx;
	background-color: #fff;
	border-bottom: 1px solid #f5f5f5;
	
	&.unread {
		background-color: #f8f8f8;
	}
	
	.avatar {
		position: relative;
		margin-right: 20rpx;
		
		.avatar-image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
		
		.avatar-badge {
			position: absolute;
			top: 0;
			right: 0;
			width: 20rpx;
			height: 20rpx;
			border-radius: 50%;
			background-color: #FF3B30;
			border: 2rpx solid #fff;
		}
	}
	
	.message-content {
		flex: 1;
		
		.message-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 6rpx;
			
			.message-name {
				font-size: 30rpx;
				color: #333;
				font-weight: bold;
			}
			
			.message-time {
				font-size: 24rpx;
				color: #999;
			}
		}
		
		.message-text {
			font-size: 28rpx;
			color: #666;
			display: block;
		}
	}
}

.empty-list {
	padding: 80rpx 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	
	.empty-icon {
		font-size: 80rpx;
		margin-bottom: 20rpx;
	}
	
	.empty-text {
		font-size: 28rpx;
		color: #999;
	}
}

.feature-list {
	background-color: #fff;
	border-radius: 16rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	overflow: hidden;
	padding: 10rpx 0;
	
	.feature-item {
		display: flex;
		align-items: center;
		padding: 24rpx 30rpx;
		border-bottom: 1px solid #f5f5f5;
		
		&:last-child {
			border-bottom: none;
		}
		
		.feature-icon {
			width: 80rpx;
			height: 80rpx;
			border-radius: 16rpx;
			background: linear-gradient(45deg, #FF9500, #FFD699);
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 40rpx;
			margin-right: 24rpx;
		}
		
		.feature-info {
			flex: 1;
			
			.feature-title {
				font-size: 30rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 6rpx;
				display: block;
			}
			
			.feature-desc {
				font-size: 26rpx;
				color: #666;
				display: block;
			}
		}
	}
}

.hint {
	font-size: 24rpx;
	color: #999;
	margin-left: 10rpx;
	font-weight: normal;
}

.arrow-icon {
	color: #ccc;
	font-size: 32rpx;
}
</style> 